{% extends ../base.html %}

{% block head %}
<script src="/static/lib/codemirror/codemirror.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/lib/codemirror/codemirror.min.css">
<link rel="stylesheet" type="text/css" href="/static/lib/codemirror/theme/monokai.min.css">
<script type="text/javascript" src="/static/lib/codemirror/mode/sql.min.js"></script>
<style>
.CodeMirror {
    width: 60rem;
    font-size:16px;
    height: 300px;
}
</style>
{% end %}

{% block body %}

<div class="col-md-12">
<form>
    <p>Path
    <select name="path">
        {% for p in path_list %}
            {% if p == path %}
                <option value="{{p}}" selected=true>{{p}}</option>
            {% else %}
                <option value="{{p}}">{{p}}</option>
            {% end %}
        {% end %}
    </select>
    </p>

<textarea id="editor" name="sql" style="width:100%;" rows = 6>{{sql}}</textarea>
<button>Run</button>
</form>
</div>

<div class="col-md-12">
{% if len(keys) > 0 %}

<table>
<tr>
    {% for key in keys %}
    <th>{{key}}</th>
    {% end %} <!-- for end -->
</tr>

    {% for record in result_list %}
    <tr>
    {% for val in record.values() %}
        <td>{{val}}</td>
    {% end %}
    </tr>

    {% end %}

</table>

{% end %} <!-- if end -->

</div>

<div style="color:red;">
{{error}}
</div>

<script type="text/javascript">
$(function () {
    var editor = $("#editor")[0];
    var codeMirror = CodeMirror.fromTextArea(editor, {
        lineNumbers:true,
        mode: "text/x-sql",
        theme:"monokai"
    });
})
</script>

{% end %}